<!-- 查看试卷 -->
<template>
  <a-modal
    v-model:visible="props.popupVisibl"
    title="评阅查看"
    width="100%"
    wrapClassName="full-modal"
    :maskClosable="false"
    :footer="null"
    @cancel="emits('update:popupVisibl', false)"
  >
    <div class="header-container">
      <span class="title">试题评阅详情</span>
      <span class="title">{{ questions.kmdm }}({{ kmInfo.kmmc }}):{{ questions.tmbh }}</span>

      <span class="title !text-red-600">科目评阅状态</span>
      <span class="title !text-red-600">{{ statusEnum[kmInfo.pyjd] || '--' }}</span>

      <span class="flex"></span>
      <a-button class="label" type="warning" @click="Data.restoreVisible = 'YJ'">
        <retweet-outlined class="mr-1" /> 调阅原卷
      </a-button>
      <a-button class="label" type="primary" @click="Data.restoreVisible = 'DTK'">
        <retweet-outlined class="mr-1" /> 调阅答题卡
      </a-button>
      <a-button type="success" class="label" @click="showResult">
        <eye-outlined class="mr-2" /> 查看答案
      </a-button>
    </div>
    <div class="container-wrap">
      <div class="main">
        <canvas-container
          :prpopsStyle="{
            width: '100%',
            height: '100%',
          }"
          :imgList="Data.reviewInfo?.dtkqtxxVoList || []"
          :tagsList="Data.tagsList || []"
          ref="canvasRef"
        >
          <template #standardmodule="{ scale, imgInfo }" v-if="isJdCorrectType(props.questions)">
            <standard-modeule
              :scale="scale"
              :imgInfo="imgInfo"
              :result="Data.dtkType || []"
              :pyZycKgtList="Data.pyZycKgtList"
              :reviewShowInfo="Data.reviewShowInfo"
            />
          </template>
        </canvas-container>
      </div>
      <div class="right">
        <functional-zone
          :reviewInfo="Data.reviewInfo"
          :pageInfo="props.questions"
          ref="functionalZoneRef"
          @historyTagIdlist="historyTagIdlist"
        >
          <template #buttonlist>
            <div class="bar-header-title">
              <a-button
                danger
                :disabled="questions.pyZt != 'PY_YPY' || kmInfo.pyjd != listPyjd"
                @click="handelClick"
              >
                <warning-outlined />
                申请重评
              </a-button>
            </div>
          </template>
        </functional-zone>
      </div>

      <!--试卷答案 -->
      <answer-modal :currentTopic="Data.reviewInfo" v-model:ckd-uvisible="Data.ckdUvisible" />

      <!-- 标记异常弹窗 -->
      <abnormal-modal
        v-model:abnormal-visible="Data.abnormalVisible"
        :questionsInfo="questions"
        :ycSource="'SQCP'"
        @success="abnormalSuccess"
      />

      <!-- 答题卡还原 -->
      <restore-card
        v-model:restoreVisible="Data.restoreVisible"
        :pyZycId="props.questions?.pyZycId"
        :kmdm="props.questions?.kmdm"
      />
    </div>
  </a-modal>
</template>

<script setup tang="ts">
import answerModal from '/@/views/teacher/review/components/answer.vue'
import abnormalModal from '/@/views/teacher/review/components/abnormal.vue'
import CanvasContainer from '/@/layouts/components/CanvasChart/canvasContainer.vue'
import functionalZone from '/@/views/exam-info/review-paper/components/functionalZone.vue'
import restoreCard from '/@/views/teacher/review/restoreCard.vue'
import standardModeule from '/@/views/teacher/choice/components/standardModeule.vue'

import { statusEnum } from '/@/enums/privateEnums'

import { reactive, ref, onMounted, computed, h, watchEffect, onUnmounted, watch } from 'vue'
import { isJdCorrectType } from '/@/views/examination-audit/abnormal-teacher/index'

import { notReview } from '/@/views/exam-info/review-paper/components/index'

import { useUserStore } from '/@/store/modules/user'
const userStore = useUserStore()
const authorityInfo = computed(() => userStore.getAuthorityItem)

import { useMessage } from '/@/hooks/web/useMessage'
import { getZycwatchPaperCheck } from '/@/api/teacher'
import { lte } from 'lodash-es'

const emits = defineEmits(['update:popupVisibl'])

const { createMessage } = useMessage()

const props = defineProps({
  questions: {
    type: Object,
    default: '',
  },
  popupVisibl: {
    type: Boolean,
    default: false,
  },
  kmInfo: {
    type: Object,
    default: () => {},
  },
  listPyjd: {
    type: String,
    default: '',
  },
})

watch(
  () => props.popupVisibl,
  async val => {
    if (val) {
      Data.reviewInfo = {}
      Data.tagsList = []
      Data.dtkType = []
      Data.pyZycKgtList = []
      await getAppraisePaperData()
    }
  }
)

const Data = reactive({
  ckdUvisible: false,
  abnormalVisible: false,
  reviewInfo: {},
  tagsList: [],
  pyZycKgtList: [],
  restoreVisible: '',
  dtkType: [],
  reviewShowInfo: {},
})

function historyTagIdlist(e) {
  Data.pyZycKgtList = e?.pyZycKgtList
  Data.dtkType = e?.dtkType
  Data.tagsList = e?.tagsList
  Data.reviewShowInfo = e?.reviewShowInfo
}

// 查看答案
const showResult = () => {
  Data.ckdUvisible = true
}

// 获取评卷数据
// TODO:调试
const getAppraisePaperData = async () => {
  try {
    const { data, code } = await getZycwatchPaperCheck({
      pyZycId: props.questions.pyZycId,
      stId: props.questions.stId,
      kmdm: props.questions.kmdm,
    })
    if (code == 200) {
      Data.reviewInfo = data
    }
  } catch (error) {
    console.error(error)
  }
}

/**
 *申请重评
 * @param
 */
async function handelClick() {
  Data.abnormalVisible = true
}
/**
 * 申请重评成功
 */
const functionalZoneRef = ref(null)
function abnormalSuccess() {
  props.questions.pyZt = 'YC_DCL'
  functionalZoneRef.value?.getYcListRecord && functionalZoneRef.value?.getYcListRecord()
}
</script>

<style lang="less" scoped>
.header-container {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0 20px;
  flex-direction: row;
  align-items: center;

  .title {
    font-size: 18px;
    font-weight: bold;
    color: #3f4355;
    margin-right: 20px;
  }

  .label {
    cursor: pointer;
    margin-right: 16px;
    margin-left: 5px;
    font-weight: 700;
  }
}
.container-wrap {
  display: flex;
  flex-direction: row;
  height: calc(100% - 50px);

  .right {
    width: calc(35% - 20px);
    background: #fff;
    height: 100%;
    .bar-header-title {
      height: 50px;
      width: 100%;
      padding: 0 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-weight: bold;
      border-bottom: 2px solid #ccc;
      .ant-btn {
        padding: 0 5px;
        font-size: 18px;
      }
    }
  }

  .main {
    width: 65%;
    flex: 1;
    border-radius: 5px;
    margin-right: 20px;
    height: 100%;
  }
}
</style>

<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    overflow-y: scroll;
    background-color: #f0f2f5;
  }
}
</style>
